<!-- page content -->
<div id="myVue" class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Vue Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>
        <p>=====================</p>
        <h3>获取数据</h3>
        <p>name:{{user.name}}</p>

        <p>=====================</p>
        <h3>单向绑定数据</h3>
        <!-- 单向绑定数据用: 或者vue:-->
        <input type="text" :value="user.name" />

        <p>=====================</p>
        <h3>双向绑定数据</h3>
        <input type="text" v-model:value="user.name" />
        <input type="text" v-model="user.gender" />

        <h3>循环绑定数据</h3>
        <!-- -->
        <select>
            <option v-for="(city, index) in cities" :value="city.cityId">{{city.cityName}}></option>
        </select>
        <table>
            <thead><tr><td>id</td><td>name</td></tr></thead>
            <tbody>
                <tr v-for="(city, index) in cities">
                    <td>{{city.cityId}}</td>
                    <td>{{city.cityName}}</td>
                </tr>
            </tbody>
        </table>


        <p>=====================</p>
        <h3>绑定事件</h3>
        <button @click="test_1()" name="test_1">test_1</button>
        <button id="test_2" price="22.33" @click="test_2($event)">test_2</button>

        <p>=====================</p>
        <h3>自定义</h3>
        <button-demo></button-demo>
        <button-count></button-count>
    </div>
</div>
<!-- /page content -->

<script>
    // $(function () {
    //     // alert("this is init function.")
    //     test_1;
    // });

    Vue.component("button-demo", {
        template: "<button>button-demo</button>",
    });
    Vue.component("button-count", {
        data: function(){
            return {
                count: 0,
            };
        },
        methods: {
            count_fun: function () {
                this.count +=1;
            }
        },
        template: "<button @click='count_fun()'>{{count}}</button>",
    })
    var myVue = new Vue({
        el: "#myVue",
        data: {
            user: {
                name: "hujiang",
                age: 18,
                gender: "male"
            },
            cities: [{
                cityId:"1",
                cityName:"chengdu"
            },{
                cityId:"2",
                cityName:"wuhan"
            }]
        },
        methods: {
            initCities: function () {
                var countryId = 522;
                //在此出ajax，如果在内部使用this就会调用ajax内部的数据，
                // 不能取到我们想要的cities列表数据，所有在ajax之前给this赋值，意识是当前的vue传给self
                //当我们需要外部的数据时就可以拿到了
                var self = this;
                $.ajax({
                    url: "/api/cities/" + countryId,
                    type: "get",
                    // contentType: "application/json",
                    // data: JSON.stringify(self.searchBean),
                    success: function (rs) {
                        self.cities = rs;
                    },
                    error: function (data) {
                        layer.alert(data.responseText, { icon: 0 });
                    },
                });
            },
            test_1: function () {
                console.log(this.user);
            },
            test_2: function (event) {
                console.log(event);
                console.log(event.target);
                // console.log(event.originalTarget);
                console.log(event.target.attributes.getNamedItem("price").name);
                console.log(event.target.attributes.getNamedItem("price").value);
            }
        },
        create:function(){
            window.test_1 = this.test_1();
        },
        //mounted生命周期挂钩子--初始化页面函数的时候，在此处挂钩
        mounted:function () {
            // this.initCities();
        }
    });
</script>